<template>
    <div class="wrap wallet">
        <div class="wrap-header font-normal">
            <div class="float mb8">
                <span>余额：{{walletAmount}}</span>
                <span>
                <el-button size="mini" @click="recharge">充值</el-button>
                <el-button size="mini" type="primary" @click="withdraw">提现</el-button>
                </span>
            </div>
            <el-table
                :data="walletList"
                style="width: 100%">
                <el-table-column
                    prop="tradeDate"
                    label="交易时间">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="交易方式">
                    <template slot-scope="scope">
                        {{scope.row.type|tradeFilter}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="amount"
                    label="交易额度">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import _axios from "../../utils/axios";

    export default {
        name: "index",
        data() {
            return {
                walletList: [],
                walletAmount: 0,
            }
        },
        methods: {
            getAmount() {
                _axios.get('/api/api/user/getById?userId=' + sessionStorage.getItem('id')).then(res => {
                    this.walletAmount = res.data.walletAmount;
                })
            },
            getTradeList() {
                this.$api.wallet.tradeList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.walletList = res.data.list;
                });
            },

            recharge() {
                let body = {
                    "amount": 100,
                    "userId": sessionStorage.getItem('id')
                };
                this.$api.wallet.recharge(body).then(res => {
                    this.getAmount();
                })

            },
            withdraw() {
                let body = {
                    "amount": 100,
                    "userId": sessionStorage.getItem('id')
                };
                this.$api.wallet.withdraw(body).then(res => {
                    this.getAmount();
                })

            }

        },
        mounted() {

            // 模拟接口返回状态，判断用户状态
            setTimeout(() => {
                this.$eventBus.emit('updateTitle', ' ');
            });
            this.getAmount();
            this.getTradeList();
        },
        filters: {
            // 充值、提现、购买支出以及出售收入四种
            tradeFilter: function (type) {
                switch (type) {
                    case 0:
                        return '充值';
                        break;
                    case 1:
                        return '提现';
                        break;
                    case 2:
                        return '出售收入';
                        break;
                    case 3:
                        return '购买支出';
                        break;
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .wallet {
        .float {
            display: flex;
            justify-content: space-between;
        }
    ;

    }
</style>
